<script lang='ts' setup>
import {onMounted, reactive, ref} from "vue";
import Footer from "../../components/index/Footer.vue";
import Nav from "../../components/index/Nav.vue";
import {indexService} from "../../services/index.service";
import {Site} from "../../config/base";
import router from "../../router";
import ScrollReveal from "scrollreveal";
import {appRef} from "@/models/app.ref";
import {RoleEnum, SiderMenuEnum} from "@/models/@types";
import {handleAssetsUrl} from "@/utils/fileConvert.ts";
import axios from "axios";
import {appContext} from "@/models/app.context.ts";
import LazyImage from "@/components/LazyImage.vue";

const saying = ref({quote: "", author: ""});
onMounted(() => {
  indexService
  .getWellKnownSaying()
  .then((res) => setTimeout(() => (saying.value = res), 0));
  setTimeout(() => {
    retScroll();
  }, 100);


  //加载本地成员数据
  const url = handleAssetsUrl('@/assets/group_list.json')
  axios.get(url).then(value => {
    console.log(value)
    groupList.value = shuffleArray(value.data)
  })
});

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1)); // 产生0到i的随机数
    [array[i], array[j]] = [array[j], array[i]]; // 交换元素
  }
  return array;
}

function retScroll(): void {
  ScrollReveal().reveal(".content", {
    duration: 1000,
    delay: 0,
    origin: "bottom",
    reset: true,
    mobile: true,
    distance: "10px",
    easing: "ease",
    scale: 0.95,
  });
}

function toWorkingEdition(): void {
  router.push("/chat/working-edition");
}

function toOnlineSearch(): void {
  router.push("/chat/online-search");
}

function toAiDraw(): void {
  router.push("/chat/aidraw");
}

function toDocumentQA(): void {
  router.push("/chat/documentQA");
}

function toMindMap(): void {
  router.push("/chat/mind-map");
}


function toProductCommunity(): void {
  window.location.href = Site.txc;
}

function toProductDocument(): void {
  window.location.href = Site.feishudocument;
  ;
}

function toGallery(): void {
  window.open(location.href + "media/gallery")
}

function toArticle(): void {
  window.open(location.href + "article")
}

/**
 * 当前展开的第几项
 */
const currentGroupUser = ref(null)

/*
* 功能介绍
*/
const functionList = ref([
  {
    name: '高效问答',
    normalImg: '@/assets/images/function_normal.svg',
    hoverImg: '@/assets/images/function_hover.webp',
    desc: '可以选择您想要的模型种类，直接与不同模型（如ChatGPT, 4.0, claude,chatglm等）进行聊天和提问，默认模型为ChatGPT',
    to: toWorkingEdition

  },
  {
    name: '在线搜索',
    normalImg: '@/assets/images/online_search_normal.svg',
    hoverImg: '@/assets/images/online_search_hover.webp',
    desc: 'Bing全网搜索帮您在整个网络中找到答案，而Arxiv学术网站搜索（仅支持英文输入）则可以帮您在学术领域找到相关文献。',
    to: toOnlineSearch
  },
  {
    name: 'AI绘画',
    normalImg: '@/assets/images/ai_draw_normal.svg',
    hoverImg: '@/assets/images/ai_draw_hover.webp',
    desc: '只需输入您想要的场景，我就会尽最大努力为您画出来。尽情发挥想象力，与我共同创作美好的艺术作品。',
    to: toAiDraw
  },
  {
    name: '文档分析',
    normalImg: '@/assets/images/document_answer_normal.svg',
    hoverImg: '@/assets/images/document_answer_hover.webp',
    desc: '上传您需要分析的文档，我将自动分析文档内容，并根据文档内容解答您的提问。',
    to: toDocumentQA
  },
  {
    name: '思维导图',
    normalImg: '@/assets/images/mind_mapping_normal.svg',
    hoverImg: '@/assets/images/mind_mapping_hover.webp',
    desc: '无论什么问题，我都会为您生成思维导图，从中心主题出发，通过分支的方式将相关的子主题和细节组织在一起，形成层次分明的结构。',
    to: toMindMap
  }
])


const partnerList = ref([
  {
    type: 'medium',
    pcUrl: '@/assets/images/cooperation/pc/zhipu.webp',
    mobileUrl: '@/assets/images/cooperation/mobile/zhipu.webp'
  },
  {
    type: 'medium',
    pcUrl: '@/assets/images/cooperation/pc/zhongke.webp',
    mobileUrl: '@/assets/images/cooperation/mobile/zhongke.webp'
  },
  {
    type: 'small',
    pcUrl: '@/assets/images/cooperation/pc/bolehui.webp',
    mobileUrl: '@/assets/images/cooperation/mobile/bolehui.webp',
  },
  {
    type: 'small',
    pcUrl: '@/assets/images/cooperation/pc/mindshow.webp',
    mobileUrl: '@/assets/images/cooperation/mobile/mindshow.webp'
  },
  {
    type: 'small',
    pcUrl: '@/assets/images/cooperation/pc/yiche.webp',
    mobileUrl: '@/assets/images/cooperation/mobile/yiche.webp'
  },
])
const keywords = ref('');

/*
* 列表
*/
const groupList = ref([])

/**
 * 当前激活的tab项
 */
const currentActiveKey = ref(1)

const solutionList = ref([
  {
    title: '稳定的API接口',
    bgUrl: '@/assets/images/stable_api.webp',
    desc: '我们提供多种功能强大的API接口，包括chatGPT、chatGLM、百度文心一言等，旨在为客户提供高质量的语言生成和自动回复服务。我们承诺每百万字符只需3元钱的价格，以满足客户的需求，并保持竞争力。'
  },
  {
    title: '企业用专业机器人',
    bgUrl: '@/assets/images/custom_robot.webp',
    desc: '我们的专业机器人能够帮助企业在智能客服、行业咨询等方面提供自动化服务。这些机器人模型性能稳定，并且可以离线部署，确保在任何时候都能为您的企业客户提供优质的服务体验。'
  },
  {
    title: '网站前期签约开发',
    bgUrl: '@/assets/images/website_dev.webp',
    desc: '我们的团队提供熟练的网站前期外包开发服务，可以帮助客户定制定制化的应用产品。无论客户所处的行业是什么，我们都会根据客户需求提供最佳的解决方案。'
  }
])

async function onGetStart(): Promise<void> {
  if (keywords.value) {
    await appRef.chatWork.add(SiderMenuEnum.Leaf);
    await appRef.chatWork.addMenuAnswer(RoleEnum.User, keywords.value);
  }
  toWorkingEdition();
}

const handleChange = (index) => {
  console.log('handleChange', index)
}

const isMobil = ref(false as boolean)
onMounted(() => {
  isMobil.value = appContext.system.data.viewWidth < 1000;
})


const changePreTab = () => {
  const temp = (currentActiveKey.value - 1) % solutionList.value.length
  if (temp == 0) {
    currentActiveKey.value = solutionList.value.length
  } else {
    currentActiveKey.value = temp
  }
}

const changeNextTab = () => {
  const temp = (currentActiveKey.value + 1) % solutionList.value.length
  if (temp == 0) {
    currentActiveKey.value = solutionList.value.length
  } else {
    currentActiveKey.value = temp
  }
}


</script>
<template>
  <div class="index flex-c">
    <Nav></Nav>
    <main class="main">
      <!-- home-board -->
      <section class="main-section-pc">
        <p class="center-text">让知识无界，智能触手可及</p>
        <div class="input-container">
          <input v-model="keywords"
                 placeholder="粘贴或输入你的需求，如: 昨年今日，世界上的奇闻轶事。"/>
          <div class="flex search_btn" @click="onGetStart">zai问一下</div>
        </div>
      </section>
      <section class="main-section-mobile">
        <p class="center-text">让知识无界，智能触手可及</p>
        <div class="input-container">
          <input v-model="keywords" placeholder="粘贴或输入你的需求"/>
        </div>
        <div class="flex search_btn ellipsis" @click="onGetStart">
          <span>zai 问一下</span>
          <img src="@/assets/images/main_section_mobile_right_arrow.svg" alt="">
        </div>
      </section>
      <section class="section mt-60">
        <div class="section-center-container">
          <img src="@/assets/images/function_img.svg" alt="">
        </div>
      </section>

      <section class="section-function flex section mt-40">
        <div class="section-item animated zoomIn" v-for="(item) in functionList" @click="item.to">
          <LazyImage :src="handleAssetsUrl(item.hoverImg)" class="head-img-hover"
                     alt=""></LazyImage>

          <LazyImage :src="handleAssetsUrl(item.normalImg)" class="head-img-normal"
                     alt=""></LazyImage>

          <p class="title">
            {{ item.name }}
          </p>
          <p class="desc">
            {{ item.desc }}
          </p>

          <div class="flex right-operator">
            <p>
              去体验
            </p>
            <img src="@/assets/images/right-operator.svg" alt="">
          </div>
        </div>
      </section>

      <section class="section mt-72 partners-section">
        <div class="section-center-container">
          <img src="@/assets/images/partner_img.svg" alt="">
        </div>
        <div class="flex partners_item_container">
          <div :class="['partners_item', item.type]" v-for="(item) in partnerList">
            <LazyImage class="pc" :src="handleAssetsUrl(item.pcUrl)" alt=""></LazyImage>
            <LazyImage class="mobile" :src="handleAssetsUrl(item.mobileUrl)" alt=""></LazyImage>
          </div>
        </div>
      </section>


      <section class="section mt-72">
        <div class="section-center-container">
          <img src="@/assets/images/solution_img.svg" alt="">
        </div>

        <div class="title_tabs mt-40">
          <p v-for="(item, index) in solutionList" @click="currentActiveKey = index + 1">
            {{ item.title }}
            <div v-if="currentActiveKey == index + 1" class="underline"></div>
          </p>
        </div>
        <div class="line">

        </div>

        <div style="
      position:relative;z-index:1" class="carousel-container">
          <div class="arrow left_arrow" @click="changePreTab">
            <img src="@/assets/images/left_arrow.svg">
          </div>

          <div class="arrow right_arrow" @click="changeNextTab">
            <img src="@/assets/images/right_arrow.svg">
          </div>

          <a-carousel :style="{
            maxWidth: '1600px',
            height: appContext.system.data.viewWidth < 1000 ? '600px' : '310px',
          }" v-model:current="currentActiveKey" class="solution_container" @change="handleChange"
                      autoPlay
                      indicator-type="never" show-arrow="never" arrow-class="solution-arrow-class">
            <a-carousel-item v-for="(item) in solutionList">
              <div class="item_container">
                <div class="item_content">
                  <div class="left item1"
                       :style="{ 'backgroundImage': 'url(' + handleAssetsUrl(item.bgUrl) + ')' }">
                  </div>
                  <div class="right">
                    <p class="title">
                      {{ item.title }}
                    </p>
                    <p class="desc">
                      {{ item.desc }}
                    </p>
                    <p class="cooperation">
                      <a href="https://wj.qq.com/s2/13088887/7112/" target="_blank">与我合作</a>
                      <img src="@/assets/images/cooperation_right_arrow.svg">
                    </p>
                  </div>
                </div>
              </div>
            </a-carousel-item>
          </a-carousel>
        </div>
      </section>

      <section class="section group-section ">
        <div class="section-center-container">
          <img src="@/assets/images/group_img.svg">
        </div>

        <a-scrollbar style="overflow: auto;" class="pc-group">
          <div class="group-user-list flex" :style="{ width: groupList.length * 200 + 'px' }">
            <div class="user-item" v-for="(item) in groupList">
              <div class="user-icon-container">
                <!--                <img :src="handleAssetsUrl(item.icon)">-->
                <LazyImage :src="handleAssetsUrl(item.icon)" alt=""></LazyImage>
              </div>
              <p class="user-name">{{ item.name }}</p>
              <ul>
                <li>
                  <div class="title">
                    <img src="@/assets/images/group-point.svg">
                    <span>擅长领域</span>
                  </div>

                  <p class="desc">
                    {{ item.domain }}
                  </p>
                </li>
                <li>
                  <div class="title">
                    <img src="@/assets/images/group-point.svg">
                    <span>主要业务</span>
                  </div>

                  <p class="desc">
                    {{ item.business }}
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </a-scrollbar>

        <div class="mobile-group">
          <div class="mobile-group-user-list">
            <div :class="['user-item', { 'active': index === currentGroupUser }]"
                 v-for="(item, index) in groupList"
                 @click="() => {
                if (currentGroupUser !== index) {
                  currentGroupUser = index
                } else {
                  currentGroupUser = null
                }
              }
                ">
              <div class="top">
                <div class="user-icon-container">
                  <LazyImage :src="handleAssetsUrl(item.icon)" alt=""></LazyImage>
                </div>
                <div class="user-name-container">
                  <p class="user-name">
                    <span>{{ item.name }}</span>
                    <img src="@/assets/images/group/bottom_arrow.svg" alt="">
                  </p>
                  <p class="user-desc-omit">{{ item.domain }}</p>
                </div>
              </div>
              <ul>
                <li>
                  <div class="title">
                    <img src="@/assets/images/group-point.svg">
                    <span>擅长领域</span>
                  </div>

                  <p class="desc">
                    {{ item.domain }}
                  </p>
                </li>
                <li>
                  <div class="title">
                    <img src="@/assets/images/group-point.svg">
                    <span>主要业务</span>
                  </div>

                  <p class="desc">
                    {{ item.business }}
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </main>
    <Footer></Footer>
  </div>
</template>
<style lang='scss' scoped>
@import "./index.scss";
</style>
